<template>
	<view class="custom-distribution">
		<view class="header u-flex-between" @click="navigateTo('/subPackages/distribution/index')">
			<view class="title">分销中心</view>
			<uni-icons type="right" size="17" color="#707070"></uni-icons>
		</view>
		<view class="box">
			<view class="li u-flex-col u-flex-end" @click="navigateTo('/subPackages/distribution/index')">
				<view class="li-num">￥{{userInfo?.commission}}</view>
				<view class="li-text">佣 金</view>
			</view>
			<view class="li u-flex-col u-flex-end" @click="navigateTo('/subPackages/distribution/team')">
				<view class="li-num">888</view>
				<view class="li-text">我的团队</view>
			</view>
			<view class="li u-flex-col u-flex-end" @click="navigateTo('/subPackages/distribution/share-code')">
				<view class="li-num">
					<image src="/static/images/fxm.svg" mode="aspectFill" class="image"></image>
				</view>
				<view class="li-text">分享码</view>
			</view>
			<view class="li u-flex-col u-flex-end" @click="navigateTo('/subPackages/distribution/commission-bill')">
				<view class="li-num">
					<image src="/static/images/fxzd.svg" mode="aspectFill" class="image"></image>
				</view>
				<view class="li-text">分销帐单</view>
			</view>
			<view class="li u-flex-col u-flex-end" @click="navigateTo('/subPackages/distribution/describe')">
				<view class="li-num">
					<image src="/static/images/fxsm.svg" mode="aspectFill" class="image"></image>
				</view>
				<view class="li-text">分销说明</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from '@/utils/router.js'
	import { computed } from 'vue'
	import useUserStore from '@/store/modules/user.js';

	const userStore = useUserStore();
	const userInfo = computed(() => userStore.userInfo);
</script>

<style lang="scss" scoped>
	.custom-distribution {
		width: 694rpx;
		background: $base-color-white;
		border-radius: 24rpx;
		margin: 20rpx auto 0;
		padding: 40rpx 10rpx;

		.header {
			padding: 0 10rpx 0 10rpx;

			.title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bolder;
				font-size: $font-size-28;
				color: $base-color;
			}
		}

		.box {
			padding-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(5, 1fr);

			.li {
				.li-num {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bolder;
					font-size: $font-size-28;
					color: $base-color;
					line-height: 1;

					.image {
						width: 34rpx;
						height: 34rpx;
						display: block;
					}
				}

				.li-text {
					padding-top: 15rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-28;
					color: $base-light-color;
				}
			}
		}
	}
</style>